import React, { Component } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class RoleDialog extends Component {
  formRef = React.createRef();
  onOk = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      this.props.store.saveRole(values);
    } catch (e) {
      console.log(e);
    }
  };

  onCancel = () => {
    this.props.store.closeRoleDialog();
  };

  render() {
    const { store } = this.props;
    const { editData, visible, loading } = store.roleDialogData;
    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    let title = editData.id ? '编辑角色' : '新增角色';
    let values = {
      ...editData,
      isGlobal: editData.isGlobal == null ? false : editData.isGlobal,
      status: editData.status == null ? true : editData.status,
    };
    return <Modal title={title} width={620}
                  destroyOnClose={true}
                  visible={visible}
                  confirmLoading={loading}
                  onOk={this.onOk}
                  onCancel={this.onCancel}>
      <Form {...layout} ref={this.formRef} initialValues={values}>
        <Form.Item name='id' noStyle={true}>
          <Input type="hidden"/>
        </Form.Item>
        <Form.Item name='orgId' noStyle={true}>
          <Input type="hidden"/>
        </Form.Item>
        <Form.Item label="角色名称" name='name' rules={[{ required: true, message: '请输入角色名称' }]}>
          <Input autoComplete="off"/>
        </Form.Item>
        <Form.Item label="角色描述" name='remark'>
          <Input.TextArea/>
        </Form.Item>
        <Form.Item label="全局适用" name='isGlobal' noStyle={!this.props.visible}>
          <Select style={{ display: this.props.visible ? '' : 'none' }}>
            <Select.Option value={true}>适用</Select.Option>
            <Select.Option value={false}>不适用</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="当前状态" name='status'>
          <Select>
            <Select.Option value={true}>启用</Select.Option>
            <Select.Option value={false}>禁用</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>;
  }
}

export default RoleDialog;
